<template>
  <div class="public_main">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <template v-if="from=='merchant'">
					<el-breadcrumb-item>{{$t('dashBoard.no2')}}</el-breadcrumb-item>
					<el-breadcrumb-item>{{$t('dashBoard.no3')}}</el-breadcrumb-item>
					<el-breadcrumb-item >{{$t('merchantList.no66')}}</el-breadcrumb-item>
				</template>
				<template v-else-if="from=='onemerchant'">
					<el-breadcrumb-item>{{$t('sidebar.operator')}}</el-breadcrumb-item>
					<el-breadcrumb-item>{{$t('sidebar.processConfig')}}</el-breadcrumb-item>
					<el-breadcrumb-item>{{$t('sidebar.processConfig')}}</el-breadcrumb-item>
				</template>
				<template v-else>
					<el-breadcrumb-item>{{$t('dashBoard.no19')}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{$t('dashBoard.no20')}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{$t('dashBoard.no18')}}</el-breadcrumb-item>
				</template>
        <el-breadcrumb-item>{{$t('payConfig.no5')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 添加流程 -->
		<div class="oneLineHasOne">
			<p >
				<span>{{$t('merchantList.no8')}}:</span>
				<span>{{partnerNo}}</span>
			</p>
		</div> 
		<div class="oneLineHasOne ">
			<p >
				<span>{{$t('merchantList.no1')}}:</span>
				<span>{{partnerName}}</span>
			</p>
		</div> 
		<p class="mb30"></p>

    <!-- 认证项字段配置 -->
		<div class="pos mb40">
			<el-button size="small" v-if="!auditFlag" type="primary" class="pos-right" @click="changeAudit">{{$t('public.no51')}}</el-button>
			<el-button size="small" v-else type="primary" class="pos-right" @click="changeAuditSure">{{$t('public.no49')}}</el-button>
			<h3 class="mb20 blue" >{{$t('payConfig.no6')}}</h3>
      <div v-for="(item,i) in identification" :key="i" class="mb20">
        <p class="mb10">{{item.stageName}}</p>
        <el-checkbox v-for="(value,i) in item.stepBOS" :disabled="!auditFlag||(!item.effective)" :key="i" v-model="value.pciasEffective">{{value.authStepName}}</el-checkbox>
      </div>
			
		</div>

    <!-- 认证项顺序配置 -->
		<div class="pos">
			<el-button size="small" v-if="!stageFlag" type="primary" class="pos-right" @click="changeStage">{{$t('public.no51')}}</el-button>
			<el-button size="small" v-else type="primary" class="pos-right" @click="changeStageSure(form.sequence)">{{$t('public.no49')}}</el-button>
			<h3 class="mb20 blue">{{$t('payConfig.no7')}}</h3>
			<el-form ref="addForm" :model="form" size="small" >
				<el-form-item :label="$t('payConfig.no12')">
          <el-select v-model="form.sequence" style="width:500px" multiple :disabled="!stageFlag">
            <el-option
              v-for="item in identification"
              :key="item.stage"
              :label="item.stageName"
              :value="item.stage">
            </el-option>
          </el-select>
					<!-- <el-input type="number" style="width:600px;" :disabled="!stageFlag" v-model="form.sequence"></el-input> -->
				</el-form-item>
			</el-form>
			<p>{{$t('long.no5')}}</p>
		</div>

  </div>
</template>
<script>
export default {
  name: 'AuthenticationListConfig',
  data () {
    return {
      from: '',
      tableData1: [],
      auditFlag: false,
      stageFlag: false,
      partnerId: '',
      partnerNo: '',
      partnerName: '',
      identification: [],
      oneList: [],//个人信息
      twoList: [],//相关信息
      threeList: [],//身份信息
      fourList: [],//账户信息
      form: {
        sequence: []
      }
    }
  },
  methods: {
    changeAuditSure(){//认证项配置
      let arr = []
      this.identification.forEach(value=>{
        if(value.stepBOS){
          value.stepBOS.forEach(item=>{
            arr.push(
              {id: item.pciasId,effective:item.pciasEffective}
            )
          })
        }
      })
      let options = {
        param: arr
      }
      this.$axios.post(this.$action.step_update, options).then(res => {
        if (res.code == 200) {
          this.$globalMsg.success(this.$t('message.success'))
        }else{
          this.$globalMsg.error(res.message)
        }
        this.getDetailData()
        this.auditFlag = false
      })
    },
    changeAudit(){
      this.auditFlag = true
    },
    changeStage(){
			this.stageFlag = true
		},
    changeStageSure(){//认证顺序配置
      if(this.form.sequence.length){
        let options = {
          param: {
            partnerId:this.partnerId,
            sequence: this.form.sequence.join(',')
          }
        }
        this.$axios.post(this.$action.step_identification, options).then(res => {
          if (res.code == 200) {
            this.$globalMsg.success(this.$t('message.success'))
            this.getDetailData()
          }else{
            this.$globalMsg.error(res.message)
          }
          this.stageFlag = false
          this.form.sequence = ''
        })
      }
    },
    getDetailData(){
      let option = {
        param: {
          partnerId:this.partnerId,
        }       
      }
      this.$axios.post(this.$action.step_list, option).then(res => {
        if (res.code == 200) {
          this.partnerName = res.data.partnerName;
          this.partnerNo = res.data.partnerNo;
          this.identification = res.data.identificationBOS
          this.identification.forEach(value=>{

          })
          this.form.sequence = res.data.sequences?res.data.sequences.split(',').map(value=>Number(value)):[]
        }
        this.stageFlag = false
      })
    }
  },
  mounted () {
    // this.getTableData();
    this.partnerId = this.$route.query.id
    this.from = this.$route.query.from
    this.getDetailData()
  }
}
</script>
<style scoped lang="scss">

</style>
